export default{
  init:function(){
    return {
      // 修饰input框的指令
      input: {
        // 当被绑定的元素插入到DOM上的时候
        inserted: function(el){
          el.style.width = '300px';
          el.style.height = '35px';
          el.style.lineHeight = '35px';
          el.style.background = '#ddd';
          el.style.fontSize = '16px';
          el.style.border = '1px solid #eee';
          el.style.textIndent = '5px';
          el.style.textIndent = '8px';
          el.style.borderRadius = '5px';
        }
      },
      // input框默认选中的指令
      focus:{
        inserted:function(el){
          el.focus();
        }
      },
      // 不能为空的指令
      required:{
        inserted: function(el){
          el.addEventListener('blur',function(event){
            if(el.value == '' || el.value == null){
              el.style.border = '1px solid red';
              console.log('我不能为空');
            }else{
              el.style.border = '0px solid red';
            }
          });
        }
      },
      // 验证指令
      checked:{
        inserted: function(el){
          el.addEventListener('blur',function(event){
            console.log(el);
            console.log(event);
          });
        }
      },
      // 验证
      validate: {
        inserted:function(el,validateStr){
          // 将验证规则拆分为验证数组
          let validateRuleArr = validateStr.value.split('|');
          // 监听失去焦点的时候
          el.addEventListener('blur',function(event){
            //失去焦点进行验证
            checkedfun();
          });
          // 循环进行验证
          function checkedfun(){
            for(var i=0; i<validateRuleArr.length; ++i){
              let requiredRegex = /^required$/; // 判断设置了required
              let emailRegex = /^email$/; // 判断设置了email
              let phoneRegex = /^phone$/; // 判断设置了 phone
              let minRegex = /min\(/; //判断设置了min 最小值
              let maxRegex = /max\(/; //判断设置了max 最大值
              let minlengthRegex = /minlength\(/; //判断设置了 minlength 最大长度
              let maxlengthRegex = /maxlength\(/; //判断设置了 maxlength 最大长度
              let regexRegex = /regex\(/;
              // 判断设置了required
              if(requiredRegex.test(validateRuleArr[i])){
                if(!required()){break;}else{removeTips();};
              };
              // 判断设置了email
              if(emailRegex.test(validateRuleArr[i])){
                if(!email()){break;}else{removeTips();};
              };
              // 判断设置了 phone
              if(phoneRegex.test(validateRuleArr[i])){
                if(!phone()){break;}else{removeTips();};
              };
              // 判断是否设置了最小值
              if(minRegex.test(validateRuleArr[i])){
                if(!eval(validateRuleArr[i])){break;}else{removeTips();};
              };
              // 判断是否设置了最大值
              if(maxRegex.test(validateRuleArr[i])){
                if(!eval(validateRuleArr[i])){break;}else{removeTips();};
              };
              // 判断设置了最小长度
              if(minlengthRegex.test(validateRuleArr[i])){
                if(!eval(validateRuleArr[i])){break;}else{removeTips();};
              };
              // 判断设置了最大长度
              if(maxlengthRegex.test(validateRuleArr[i])){
                if(!eval(validateRuleArr[i])){break;}else{removeTips();};
              };
              // 判断测试正则表达式
              if(regexRegex.test(validateRuleArr[i])){
                if(!eval(validateRuleArr[i])){break;}else{removeTips();};
              };
            };
          }
          // 验证是否是必填项
          function required(){
            if(el.value == '' || el.value == null){
              // console.log('不能为空');
              tipMsg('不能为空');
              return false;
            };
            return true;
          }
          // 验证是否是邮箱
          function email(){
            let emailRule = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/;
            if(!emailRule.test(el.value)){
              tipMsg('请输入正确的邮箱地址');
              return false;
            };
            return true;
          };
          // 验证是否是手机号码
          function phone(){
            let phoneRule = /^[1][3,4,5,7,8][0-9]{9}$/;
            if(!phoneRule.test(el.value)){
              tipMsg('请输入正确的手机号码');
              return false;
            };
            return true;
          }
          // 最小值验证
          function min(num){
            if(el.value < num){
              tipMsg('最小值不能小于'+num);
              //console.log('最小值不能小于'+num);
              return false;
            };
            return true;
          };
          // 最大值验证
          function max(num){
            if(el.value > num){
              tipMsg('最大值不能大于'+num);
              //console.log('最大值不能大于'+num);
              return false;
            };
            return true;
          };
          // 最小长度验证
          function minlength(length){
            if(el.value.length < length){
              //console.log('最小长度不能小于'+length);
              tipMsg('最小长度不能小于'+length);
              return false;
            };
            return true;
          };
          // 最大长度进行验证
          function maxlength(length){
            if(el.value.length > length){
              //console.log('最大长度不能大于'+length);
              tipMsg('最大长度不能大于'+length);
              return false;
            };
            return true;
          }
          // 进行正则表达式的验证
          function regex(rules){
            if(!rules.test(el.value)){
              tipMsg('请输入正确的格式');
              return false;
            };
            return true;
          }
          // 添加提示信息
          function tipMsg(msg){
            removeTips();
            let tipsDiv = document.createElement('div');
            let curDate = Date.parse(new Date());
            tipsDiv.innerText = msg;
            tipsDiv.className = 'tipsDiv';
            tipsDiv.id = curDate;
            tipsDiv.style.background = '#f2f2f2';
            tipsDiv.style.color = 'red';
            tipsDiv.style.position = 'absolute';
            tipsDiv.style.top = el.offsetTop+45+'px';
            tipsDiv.style.left = el.offsetLeft+'px';
            document.body.appendChild(tipsDiv);
            //setTimeout(function(){
            //  document.getElementById(curDate).remove();
            //},2000);
          }
          // 移除提示信息
          function removeTips(){
            if(document.getElementsByClassName('tipsDiv')[0]){
              document.getElementsByClassName('tipsDiv')[0].remove();
            };
          };
        }
      }
    };
  }
}
